<template>
  <div class="box">
    <el-dialog title="普通查看" :visible="showCommonDetails" :fullscreen="true" width="30%" :before-close="handleClose">
      <div class="innerBoxDialog">
        <div class="p_title">考试信息</div>
        <div class="box_title">
          <div class="title-inner">
            <p class="first">考试：</p>
            <p class="second" style="color: #00b99e;">{{ chooseObj.recordsName }}</p>
          </div>
          <div class="title-inner">
            <p class="first" style="font-weight: 400;font-size: 14px;">起止日期：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">{{ chooseObj.examStartDate }} 至 {{ chooseObj.examEndDate }}</p>
          </div>
        </div>
        <div class="box_title" v-if="isXiShuFlag">
          <div class="title-inner" style="align-items: center;">
            <p class="first">考核通过标准建议：</p>
            <p class="second" style="color: #00b99e;">{{ passScore }}分 </p>
          </div>
          <div class="title-inner" style="align-items: center;">
            <p class="first">总成绩核算公式建议：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">
                {{ xiShuStandard }}
            </p>
          </div>
        </div>
        <div class="box_title" v-else>
          <div class="title-inner" style="align-items: center;">
            <p class="first">考核通过系数标准建议：</p>
            <p class="second" style="color: #00b99e;">{{ passScorePercent }} </p>
          </div>
        </div>
        <div class="upload-tab">
          <div :class="item.id == activeKey ? 'on baseDiv':'baseDiv'" v-for="(item, index) in dataList" :key="index"
            @click="changeTab(item, index)">
            <p class="inner-title">{{ item.title }}</p>
          </div>
        </div>
        <div class="content-box">
          <!-- 考站维度 start -->
          <div class="stationBox" v-if="activeKey == 0">
            <div class="stationInner" v-for="(item, i) in recordsExamResultStationObj.examStationVos" :key='i'>
              <div class="stationTitle">{{ item.stationName }}</div>
              <div class="content-inner">
                <div class="content-list">
                  <p class="title">最高分：</p>
                  <p class="count">{{ item.zuida }}</p>
                </div>
                <div class="content-list">
                  <p class="title">最低分：</p>
                  <p class="count">{{ item.zuidi }}</p>
                </div>
                <div class="content-list">
                  <p class="title">平均分：</p>
                  <p class="count">{{ item.pingjun }}</p>
                </div>
                <div class="content-list">
                  <p class="title">总分：</p>
                  <p class="count">{{ item.zongfen }}</p>
                </div>
              </div>
              <div class="content-inner">
                <div class="content-list" style="cursor: pointer;" @click="showStudents(item, '', item.studentCount)">
                  <p class="title">学生数：</p>
                  <p class="count primaryCount">{{ item.studentCount }}</p>
                </div>
                <div class="content-list" style="cursor: pointer;" @click="showStudents(item, 0, item.weitongguo)">
                  <p class="title">未通过数：</p>
                  <p class="count errorCount">{{ item.weitongguo }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 考站维度 end -->

          <!-- 考题维度 start -->
          <div class="stationBox" v-if="activeKey == 1">
            <div class="stationInner" v-for="(item, i) in recordsExamResultExamObj.examExaminationVos" :key='i'>
              <div class="stationTitle">{{ item.examinationName }}</div>
              <div class="content-inner">
                <div class="content-list">
                  <p class="title">最高分：</p>
                  <p class="count">{{ item.zuida }}</p>
                </div>
                <div class="content-list">
                  <p class="title">最低分：</p>
                  <p class="count">{{ item.zuida }}</p>
                </div>
                <div class="content-list">
                  <p class="title">平均分：</p>
                  <p class="count">{{ item.pingjun }}</p>
                </div>
                <div class="content-list">
                  <p class="title">总分：</p>
                  <p class="count">{{ item.zongfen }}</p>
                </div>
              </div>
              <div class="content-inner">
                <div class="content-list" style="cursor: pointer;"
                  @click="showExamStudents(item, '', item.studentCount)">
                  <p class="title">学生数：</p>
                  <p class="count primaryCount">{{ item.studentCount }}</p>
                </div>
                <div class="content-list" style="cursor: pointer;" @click="showExamStudents(item, 0, item.weitongguo)">
                  <p class="title">未通过数：</p>
                  <p class="count errorCount">{{ item.weitongguo }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 考题维度 end -->
          <!-- 得分项维度 start -->
          <div class="scoreBox" v-if="activeKey == 2">
            <p class="scoreTitle">请选择对应的考题</p>
            <div class="scoreInner">
              <div class="scoreInnerList" v-for="(item, i) in examExaminationListArr" :key='i' @click="chooseScoreHandle(item)">
                <div class="stationTitle">第{{ i + 1 }}题</div>
                <div class="content-inner">
                  <div class="content-list">
                    <p class="title">题目：</p>
                    <p class="count">{{ item.examinationName }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 得分项维度 end -->
          <!-- 考生维度 start -->
          <div class="stationBox" v-if="activeKey == 3">
            <div class="inner inner-content-box">
              <div class="searchBox">
                <el-form :inline="true" :model="searchForm" size="small" style="width: 100%">
                  <el-form-item label="学生姓名">
                    <el-input v-model="searchForm.studentName" placeholder="学生姓名" clearable
                      style="width: 100px"></el-input>
                  </el-form-item>
                  <el-form-item label="准考证号">
                    <el-input v-model="searchForm.studentCandidateId" placeholder="准考证号" clearable
                      style="width: 140px"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号">
                    <el-input v-model="searchForm.studentIdcard" placeholder="身份证号" clearable
                      style="width: 160px"></el-input>
                  </el-form-item>
                  <el-form-item label="成绩">
                    <el-select style="width: 120px" v-model="searchForm.studentType" placeholder="请选择成绩" filterable
                      :clearable='false'>
                      <el-option v-for="item in studentTypeList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="getRecordsExamResultPage" size="small"
                      icon="el-icon-search">搜索</el-button>
                    <el-button @click="searchReset" size="small" icon="el-icon-delete">清空</el-button>
                    <el-button @click="exportHandle" type="success" size="small" icon='icon iconfont icon-xiazai'> 下载</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="detailsBox">
                <ag-grid-vue class="ag-theme-alpine ag-theme-quartz" :localeText="localeText" :gridOptions="gridOptions"
                  @grid-ready="onGridReady" @sort-changed="onSortChangedAggrid" @filter-changed="onFilterChangedAggrid"
                  :rowHeight="38" :headerHeight="42" :columnDefs="columnDefs" :defaultColDef="defaultColDef"
                  :rowData="studentList" rowSelection="multiple" :rowMultiSelectWithClick="true"
                  :enableRangeSelection="true">
                </ag-grid-vue>
              </div>
              <div class="pageBox">
                <div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                </el-pagination>
              </div>
            </div>
          </div>
          <!-- 考生维度 end -->
        </div>
      </div>
    </el-dialog>
    <showStationStudentsList ref="showStationStudentsList" :stationStudentsObj='stationStudentsObj'
      :recordsId='chooseObj.id' :studentType='studentType' :showStudentsFlag='showStudentsFlag'
      @showStudentsClose='showStudentsClose'></showStationStudentsList>
    <showExamStudentsList ref="showExamStudentsList" :stationStudentsObj='examStudentsObj' :recordsId='chooseObj.id'
      :studentType='studentType' :showStudentsFlag='showExamStudentsFlag' @showStudentsClose='showExamStudentsClose'>
    </showExamStudentsList>
    <showScoreStudentsList ref="showScoreStudentsList" :stationStudentsObj='scoreStudentsObj' :recordsId='chooseObj.id' :recordsObj='chooseObj'
      :showStudentsFlag='showScoreStudentsFlag' @showStudentsClose='showScoreStudentsClose'>
    </showScoreStudentsList>
    <studentInfoDialog ref="studentInfoDialog" :chooseStudent='chooseStudent'></studentInfoDialog>
  </div>
</template>

<script>
import showStationStudentsList from '@/views/modules/examinationScore/showStationStudentsList.vue'
import showExamStudentsList from '@/views/modules/examinationScore/showExamStudentsList.vue'
import showScoreStudentsList from '@/views/modules/examinationScore/showScoreStudentsList.vue'
import { recordsExamResultStation, recordsExamResultExam, recordsExamResultPage, examExaminationList } from '@/api/examinationScore.js'
import studentInfo from '@/views/modules/examinationScore/studentInfo/studentInfo.vue'
import studentInfoDialog from '@/views/modules/examinationScore/studentInfoDialog/studentInfoDialog.vue'
export default {
  props: ['showCommonDetails', 'chooseObj', 'isXiShuFlag', 'xiShuStandard', 'passScore', 'passScorePercent'],
  components: {
    showStationStudentsList,
    showExamStudentsList,
    showScoreStudentsList,
    studentInfo,
    studentInfoDialog
  },
  data () {
    return {
      dataList: [
        {
          id: 0,
          title: '考站维度'
        },
        {
          id: 1,
          title: '考题维度'
        },
        {
          id: 2,
          title: '得分项维度'
        },
        {
          id: 3,
          title: '考生维度'
        }
      ],
      studentTypeList: [
        // {
        //   label: '优秀考生',
        //   value: '2'
        // },
        {
          label: '全部',
          value: '3'
        },
        {
          label: '及格考生',
          value: '1'
        },
        {
          label: '不及格考生',
          value: '0'
        }
      ],
      activeKey: 0,
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      page: {
        pageSizes: [100, 2000, 5000],
        currentPage: 1,
        total: 0,
        pageSize: 100
      },
      searchForm: {
        studentName: '',
        studentIdcard: '',
        studentCandidateId: '',
        // 1系数查看    0非系数查看
        // passType: '0',
        studentType: '1'
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 70,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        {
          headerName: '姓名',
          field: 'studentName',
          filter: 'studentName',
          tooltipField: 'studentName',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          cellRenderer: 'studentInfo',
          pinned: 'left'
        },
        {
          headerName: '使用考站数',
          field: 'stationsCount',
          filter: 'stationsCount',
          tooltipField: 'stationsCount',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        }
      ],
      columnDefs: [],
      gridApi: null,
      // 查看学生
      showStudentsFlag: false,
      stationStudentsObj: {},
      // 2:优秀 1:及格 0:不及格
      studentType: '1',
      // 考站维度数据
      recordsExamResultStationObj: {},
      examStudentsObj: {},
      showExamStudentsFlag: false,
      // 得分项维度
      examExaminationListArr: [],
      scoreStudentsObj: {},
      showScoreStudentsFlag: false,
      // 考题维度数据
      recordsExamResultExamObj: {},
      // 学生维度
      studentList: [],
      showStudentVisible: false,
      chooseStudent: {}
    }
  },
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  methods: {
    // allClose
    allClose () {
      this.$refs.studentInfoDialog.showStudentClose()
      setTimeout(() => {
        this.showScoreStudentsFlag = false
        this.showStudentVisible = false
        this.showExamStudentsFlag = false
        this.showStudentsFlag = false
      }, 10)
    },
    // 考站维度列表
    getRecordsExamResultStation () {
      let params = {
        recordsId: this.chooseObj.id
      }
      recordsExamResultStation(params).then(res => {
        this.recordsExamResultStationObj = res.data.data
      })
    },
    // 考题维度列表
    getRecordsExamResultExam () {
      let params = {
        recordsId: this.chooseObj.id
      }
      recordsExamResultExam(params).then(res => {
        this.recordsExamResultExamObj = res.data.data
      })
    },
    // 得分项维度
    getExamExaminationList () {
      let params = {
        recordsId: this.chooseObj.id
      }
      examExaminationList(params).then(res => {
        this.examExaminationListArr = res.data.data
      })
    },
    // 判断对象几个属性
    countProperties (obj) {
      return Object.keys(obj).length
    },
    // 考生维度列表
    getRecordsExamResultPage () {
      let params = Object.assign({
        recordsId: this.chooseObj.id,
        page: this.page.currentPage,
        limit: this.page.pageSize
      }, this.searchForm)
      if (this.isXiShuFlag) {
        params.passType = '1'
      } else {
        params.passType = '0'
      }
      recordsExamResultPage(params).then(res => {
        // 表头用第一个学生来搞
        // let firstStudent = res.data.page.records[0]
        let students = res.data.page.records
        let arr = []
        students.map(v => {
          let bbb = JSON.parse(JSON.stringify(v))
          bbb.stationsCount = this.countProperties(bbb.stations)
          let arrs = []
          // bbb.stations.map(qq => { })
          for (var el in bbb.stations) {
            arrs.push({
              name: el,
              teachers: bbb.stations[el]
            })
          }
          arrs = arrs.sort((a, b) => parseInt(a.name.substring(1, 2)) - parseInt(b.name.substring(1, 2)))
          bbb.stationsObj = arrs
          arr.push(bbb)
        })

        if (arr.length > 0) {
          let firstStudent = arr[0]
          let aaa = []
          firstStudent.stationsObj.map(q => {
            console.log(q)
            q.teachers.map((p, index) => {
              aaa.push({
                headerName: q.name + '考官' + Number(index + 1) + '姓名',
                field: q.name + 'teacher' + Number(index + 1),
                filter: q.name + 'teacher' + Number(index + 1),
                tooltipField: q.name + 'teacher' + Number(index + 1),
                minWidth: 160,
                flex: 1,
                sortable: true,
                resizable: true,
                hide: false,
                editable: false
              })
              aaa.push({
                headerName: q.name + '考官' + Number(index + 1) + '得分',
                field: q.name + 'result' + Number(index + 1),
                filter: q.name + 'result' + Number(index + 1),
                tooltipField: q.name + 'result' + Number(index + 1),
                minWidth: 160,
                flex: 1,
                sortable: true,
                resizable: true,
                hide: false,
                editable: false
              })
            })
            aaa.push({
              headerName: q.name + '得分',
              field: q.name + 'score',
              filter: q.name + 'score',
              tooltipField: q.name + 'score',
              minWidth: 120,
              flex: 1,
              sortable: true,
              resizable: true,
              hide: false,
              editable: false
            })
          })
          aaa.push({
            headerName: '总得分',
            field: 'allScore',
            filter: 'allScore',
            tooltipField: 'allScore',
            width: 80,
            sortable: true,
            resizable: true,
            hide: false,
            editable: false,
            pinned: 'right'
          })
          arr.map(pq => {
            let allScore = 0
            pq.stationsObj.map(q => {
              let score = 0
              let k = 0
              q.teachers.map((p) => {
                score += Number(p.result)
                k++
              })
              score = (score / k).toFixed(2)
              q.teachers.map((p, index) => {
                // name
                let key1 = q.name + 'teacher' + Number(index + 1)
                // result
                let key2 = q.name + 'result' + +Number(index + 1)
                // score
                let key3 = q.name + 'score'
                pq[key1] = p.teacherName || '暂无'
                pq[key2] = p.result
                pq[key3] = score
              })
              allScore += Number(score)
              pq.allScore = Number(allScore).toFixed(2)
            })
          })
          // 获取表头
          this.columnDefs = []
          setTimeout(() => {
            this.columnDefs = this.rowIndexArr.concat(aaa)
            this.studentList = JSON.parse(JSON.stringify(arr))
            this.page.total = res.data.page.total
          }, 10)
        } else {
          setTimeout(() => {
            this.columnDefs = this.rowIndexArr.concat([])
            this.studentList = JSON.parse(JSON.stringify(arr))
            this.page.total = 0
          }, 10)
        }
      })
    },
    // 查看学生
    viewStudentHandle (val) {
      this.chooseStudent = val
      this.$refs.studentInfoDialog.openShowStudent()
    },
    handleClose () {
      this.$emit('closeCommonDetails')
    },
    changeTab (val) {
      this.activeKey = val.id
      if (val.id === '3') {
        this.getRecordsExamResultPage()
      }
    },
    onCommonShow () {
      // this.getHeadersCol()
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.studentList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.studentList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.studentList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.studentList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    // 获取表头
    getHeadersCol () {
      this.columnDefs = []
      setTimeout(() => {
        this.columnDefs = this.rowIndexArr
      }, 10)
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getRecordsExamResultPage()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getRecordsExamResultPage()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {
        studentType: '1'
      }
      this.page.currentPage = 1
      this.getRecordsExamResultPage()
    },
    // 导出excel
    exportHandle () {
      console.log('this.chooseObj', this.chooseObj.recordsName)
      this.$http({
        url: '/excel/student/studentRecords',
        method: 'post',
        responseType: 'blob',
        data: { recordsId: this.chooseObj.id }
      }).then(({ data }) => {
        var binaryData = []
        binaryData.push(data)
        let blob = new Blob(binaryData, {
          type: ' application/vnd.ms-excel '
        })
        setTimeout(() => {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, 'link')
          } else {
            const link = document.createElement('a')
            console.log(window.URL.createObjectURL)

            link.download = this.chooseObj.recordsName
            link.style.display = 'none'
            link.href = window.URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$message.success(`${this.chooseObj.recordsName}导出成功`)
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 查看考站详情
    showStudents (val, studentType, count) {
      if (count === 0) {
        this.$message.warning('考生为0，暂不能查看')
        return
      }
      this.stationStudentsObj = val
      this.studentType = studentType
      setTimeout(() => {
        this.showStudentsFlag = true
        this.$refs.showStationStudentsList.onStudentsShow()
      }, 10)
    },
    showStudentsClose () {
      this.showStudentsFlag = false
    },
    // 查看考题详情
    showExamStudents (val, studentType, count) {
      if (count === 0) {
        this.$message.warning('考生为0，暂不能查看')
        return
      }
      this.examStudentsObj = val
      this.studentType = studentType
      setTimeout(() => {
        this.showExamStudentsFlag = true
        this.$refs.showExamStudentsList.onStudentsShow()
      }, 10)
    },
    showExamStudentsClose () {
      this.showExamStudentsFlag = false
    },
    showScoreStudentsClose () {
      this.showScoreStudentsFlag = false
    },
    // 查看得分项维度
    chooseScoreHandle (val) {
      // 需要传入大分还是小分 方便后面取值
      console.log(val, '222222')
      this.scoreStudentsObj = val
      setTimeout(() => {
        this.showScoreStudentsFlag = true
        this.$refs.showScoreStudentsList.onStudentsShow()
      }, 10)
    }
  }
}
</script>

<style lang='scss'>
.box {
  .ag-root-wrapper.ag-layout-normal {
    height: 100% !important;
  }

  .el-dialog__body {
    padding: 10px;
  }

  .innerBoxDialog {
    height: calc(100vh - 70px);
    width: 1200px;
    margin: 0 auto;
    // background: pink;
    border: 1px solid #00b99e;
    overflow: auto;
    padding: 20px 20px;
    border-radius: 6px;

    .p_title {
      color: #000;
      font-size: 18px;
      font-weight: 500;
      position: relative;
    }

    .p_title:before {
      content: '';
      height: 80%;
      width: 4px;
      background: #00b99e;
      border-radius: 4px;
      position: absolute;
      left: -10px;
      top: 2px;
    }

    .box_title{
      height: 40px;
      width: 100%;
      background: #00b99e20;
      margin: 10px 0;
      border-radius: 6px;
      display: flex;
      font-size: 16px;
      padding-left: 10px;
      justify-items: center;
      align-items: center;
      .title-inner{
        display: flex;
        .first{
          padding-right: 2px;
          color: #666;
        }
        .second{
          padding-right: 40px;
          font-weight: 500;
        }
      }
    }

    .content-box {
      height: calc(100vh - 240px);
      overflow: auto;
      width: 100%;
      border: 1px solid #00b99e;
      border-top: none;
      border-radius: 0 0 6px 6px;
      background: #fff;
      padding: 10px;

      // 考站维度
      .stationBox {
        display: flex;
        flex-wrap: wrap;
        height: 100%;

        .stationInner {
          width: 24%;
          height: 160px;
          background-color: #00b99e20;
          border-radius: 6px;
          margin-top: 15px;
          overflow: hidden;

          .stationTitle {
            background: linear-gradient(to right, #02f1cd60, #00b99e60);
            height: 40px;
            padding: 0 10px;
            line-height: 40px;
            font-weight: 500;
          }

          .content-inner {
            padding: 0px;
            display: flex;
            flex-wrap: wrap;

            .content-list {
              width: 50%;
              height: 30px;
              display: flex;

              .title {
                width: 70px;
                text-align: right;
              }

              .count {
                flex: 1;
              }

              .errorCount {
                font-weight: 500;
                color: red;
              }

              .primaryCount {
                font-weight: 500;
                color: #00b99e;
              }
            }
          }
        }

        .stationInner:not(:nth-child(4n)) {
          margin-right: calc(4% / 3);
        }
      }

      // 得分项维度
      .scoreBox {
        display: flex;
        flex-direction: column;
        height: 100%;

        .scoreTitle {
          font-weight: 500;
          font-size: 16px;
          height: 30px;
          line-height: 30px;
          margin: 0;
        }

        .scoreInner {
          flex: 1;
          overflow: auto;
          display: flex;
          flex-wrap: wrap;

          .scoreInnerList {
            width: 24%;
            height: 160px;
            background-color: #00b99e20;
            border-radius: 6px;
            margin-top: 15px;
            overflow: hidden;
            cursor: pointer;

            .stationTitle {
              background: linear-gradient(to right, #02f1cd60, #00b99e60);
              height: 40px;
              padding: 0 10px;
              line-height: 40px;
              font-weight: 500;
            }

            .content-inner {
              padding: 0px;
              display: flex;
              flex-wrap: wrap;

              .content-list {
                width: 50%;
                height: 30px;
                display: flex;

                .title {
                  width: 70px;
                  text-align: right;
                }

                .count {
                  flex: 1;
                }

                .errorCount {
                  font-weight: 500;
                  color: red;
                }

                .primaryCount {
                  font-weight: 500;
                  color: #00b99e;
                }
              }
            }
          }

          .scoreInnerList:not(:nth-child(4n)) {
            margin-right: calc(4% / 3);
          }
        }
      }
    }
  }
}

.upload-tab {
  height: 65px;
  overflow-x: auto;
  border-bottom: #21d0b6 2px solid;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  .baseDiv{
    flex-basis: 180px; 
    flex-shrink: 0; 
  }
}

.upload-tab div {
  width: 188px;
  height: 46px;
  display: inline-block;
  text-align: center;
  float: left;
  color: #606264;
  background: url('~@/assets/img/unactive.png') no-repeat;
  line-height: 46px;
  font-size: 14px;
  margin-right: -16px;
  position: relative;
  z-index: 5;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.upload-tab div .inner-title {
  padding: 0;
  margin: 0;
  height: 18px;
  line-height: 18px;
}

.upload-tab div.on {
  background: url('~@/assets/img/active.png') no-repeat;
  color: #fff;
}

.upload-tab div:nth-child(1) {
  z-index: 21;
}

.upload-tab div:nth-child(2) {
  z-index: 20;
}

.upload-tab div:nth-child(3) {
  z-index: 19;
}

.upload-tab div:nth-child(4) {
  z-index: 18;
}

.upload-tab div:nth-child(5) {
  z-index: 17;
}

.upload-tab div:nth-child(6) {
  z-index: 16;
}

.upload-tab div:nth-child(7) {
  z-index: 15;
}

.upload-tab div:nth-child(8) {
  z-index: 14;
}

.upload-tab div:nth-child(9) {
  z-index: 13;
}

.upload-tab div:nth-child(10) {
  z-index: 12;
}

.upload-tab div:nth-child(11) {
  z-index: 11;
}

.upload-tab div:nth-child(12) {
  z-index: 10;
}

.upload-tab div:nth-child(13) {
  z-index: 9;
}

.upload-tab div:nth-child(14) {
  z-index: 8;
}

.upload-tab div:nth-child(15) {
  z-index: 7;
}

.upload-tab div:nth-child(16) {
  z-index: 6;
}

.upload-tab div:nth-child(17) {
  z-index: 5;
}

.upload-tab div:nth-child(18) {
  z-index: 4;
}

.upload-tab div:nth-child(19) {
  z-index: 3;
}

.upload-tab div:nth-child(20) {
  z-index: 2;
}

.upload-tab div:nth-child(21) {
  z-index: 1;
}
</style>